import React, { useEffect, useState } from 'react'
import { Button, Form, Input, message, Modal, Skeleton, TreeSelect } from 'antd'
import { addRole, getDetailRole, updateRole } from '@/services/role'

const CreateOrEdit = (props) => {
  // 树状显示
  const { SHOW_PARENT } = TreeSelect
  // 从props接受过来的数据
  const { isModalVisible, isShowModal, treeData, actionRef, ids } = props
  // 选中权限的id
  const [checked, setChecked] = useState([])
  // 角色详情数据
  const [initialValues, setInitialValues] = useState(undefined)
  // 控制添加修改的标题
  const type = ids === undefined ? '添加' : '修改'

  // 改变选中权限的id
  const onChange = (value) => {
    setChecked(value)
  }

  useEffect(async () => {
    // 发送请求，获取角色详情
    if (ids !== undefined) {
      const response = await getDetailRole(ids)
      setInitialValues(response)
    }
  }, [])

  // 添加和修改的操作
  const handleSubmit = async values => {
    let response = {}

    if (ids === undefined) {
      const response = await addRole(values)
    } else {
      const response = await updateRole(values)
    }

    if (response.status === undefined) {
      message.success(`${type}成功`)
      // 关闭模态框
      isShowModal(false)

      actionRef.current.reloadAndRest()
    }
  }

  return (
    <div>
      <Modal
        title={`${type}角色`}
        footer={null}
        centered={true}
        visible={isModalVisible}
        onCancel={() => isShowModal(false)}
        destroyOnClose={true}
      >
        {
          initialValues === undefined && ids !== undefined ? <Skeleton active/> :
            <Form
              name="edit"
              onFinish={values => handleSubmit(values)}
              initialValues={initialValues}
            >
              <Form.Item name="id" hidden={true}>
                <Input/>
              </Form.Item>
              {
                ids !== undefined ? '' :
                  <Form.Item label="唯一标识" name="name" rules={[{ required: true, message: '请填写唯一标识' }]}
                  >
                    <Input
                      tooltip="最长为 24 位"
                      placeholder="请输入名称"
                      style={{
                        width: '100%',
                      }}
                    />
                  </Form.Item>
              }
              <Form.Item label="角色名称" name="cn_name" rules={[{ required: true, message: '请填写角色名称' }]}
              >
                <Input
                  tooltip="最长为 24 位"
                  placeholder="请输入名称"
                  style={{
                    width: '100%',
                  }}
                />
              </Form.Item>
              <Form.Item label="选择权限" name="permission_id"
              >
                <TreeSelect
                  treeData={treeData}
                  value={checked}
                  onChange={onChange}
                  treeCheckable={true}
                  showCheckedStrategy={SHOW_PARENT}
                  placeholder="请选择权限"
                  style={{
                    width: '100%',
                  }}
                />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">提交</Button>
              </Form.Item>
            </Form>
        }
      </Modal>
    </div>
  )
}

export default CreateOrEdit
